import React, { useRef, useState, useCallback } from 'react'
import Webcam from "react-webcam";

export default function CustomWebcam() {
  const webcamRef = useRef(null);
  const [imgSrc, setImgSrc] = useState(null);
  const [mirrored, setMirrored] = useState(true);

  const [pai, setPai] = useState(false)
  const capture = useCallback(() => {
    // console.log();
    const imageSrc = webcamRef.current.getScreenshot();
    setImgSrc(imageSrc);
  }, [webcamRef]);

  const retake = () => {
    setImgSrc(null);
  };

  return (
    <div>
      <div className="container">
        {imgSrc ? (
          <img src={imgSrc} alt="webcam" />
        ) : (
          <Webcam
            width={300}
            height={300}
            ref={webcamRef}
            mirrored={mirrored}
            minScreenshotHeight={100}
            screenshotFormat="image/jpeg"
            screenshotQuality={0.8}
          />
        )}
        {/* <div className="controls">
        <div>
          <input
            type="checkbox"
            checked={mirrored}
            onChange={(e) => setMirrored(e.target.checked)}
          />
          <label>Mirror</label>
        </div>
      </div> */}
        <div className="btn-container">
          {imgSrc ? (
            <button onClick={retake}>重拍</button>
          ) : (
            <button onClick={capture}>拍照</button>
          )}
          <button onClick={() => { console.log(imgSrc); }}>打印</button></div></div></div>)
}
